<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>CSR:客户端渲染</h1>
    <div>
        <button id="btn">点我发送请求得以服务器的数据，并且渲染到页面上</button>
    </div>
    <ul id="box"></ul>
</body>
<!-- 导入 jquery -->
<script src="/jquery.min.js"></script>
<script>
    $('#btn').click(async function () {
        // 发送请求到服务器得到数据
        const res = await $.ajax({
            url: '/getCSRData',
            method: 'GET',
            dataType: 'JSON'
        })
        // 得到 ul
        var box = $('#box')
        res.forEach(item => {
            // 创建 li 标签
            var li = $('<li>').text(item.name)
            // 将 li 添加到 box 中
            box.append(li)
        })
    })
</script>

</html>